<template>
  <div class="post-container">
    <div class="post-header">
      <el-avatar :size="40" :src="post.imageUrls" />
      <div class="user-info">
        <span class="username">{{  post.authorId }}</span>
        <span class="post-time">{{  formatDate(post.createTime) }}</span>
      </div>
    </div>

    <!-- 帖子内容 -->
    <div class="post-content">
      <p>{{ post.text }}</p>
      <el-image
        v-if="post.imageUrls"
        :src="post.imageUrls"
        fit="contain"
        :preview-src-list="[post.imageUrls]"
        style="height: 200px; width: 100%; border-radius: 4px;"
      />
    </div>

    <!-- 互动按钮 -->
    <div class="post-actions">
      <button
        :class="['like-button', { liked: post.isLiked }]"
        @click="handleLike"
      >
        <span class="icon">{{ post.isLiked? '★' : '☆' }}</span>
        <span class="count">{{  post.likeCount }}</span>
      </button>
      <button class="comment-button" @click="handleComment">
        <span class="icon">💬</span>
        <span class="count">{{  post.commentCount  }}</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 定义帖子数据的响应式变量
const post = ref({
  id: null,
  content: null,
  authorId: null,
  createTime: null,
  updateTime: null,
  commentCount: 0,
  likeCount: 0,
  imageUrls: null,
  deleted: 0,
  isLiked: false
})

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString()
}

// 点赞处理函数
const handleLike = () => {
  post.value.isLiked =!post.value.isLiked
  post.value.likeCount += post.value.isLiked? 1 : -1
}

// 评论处理函数（这里只是简单提示，实际项目中可进行路由跳转等操作）
const handleComment = () => {
  alert(`准备评论帖子 ${post.value.id}`)
}

// 组件挂载时获取帖子数据（假设获取第一条帖子数据，你可以根据实际需求调整）
onMounted(async () => {
  try {
      // 发送 GET 请求获取帖子列表（假设接口返回的数据结构符合要求）
      const response = await axios.get('/api/post/page')
    if (response.data && response.data.code === 200 && response.data.data && response.data.data.list && response.data.data.list.length > 0) {
      const postData = response.data.data.list[1]
      post.value.id = postData.id
      post.value.content = postData.content
      post.value.authorId = postData.authorId
      post.value.createTime = postData.createTime
      post.value.updateTime = postData.updateTime
      post.value.commentCount = postData.commentCount
      post.value.likeCount = postData.likeCount
      post.value.imageUrls = postData.imageUrls
      post.value.deleted = postData.deleted
      // 初始化点赞状态（假设接口未返回，可根据业务逻辑调整）
      post.value.isLiked = false 
    } else {
      ElMessage.warning('暂无帖子数据')
    }
  } catch (error) {
    ElMessage.error('获取帖子数据失败')
    console.error('获取帖子数据失败:', error)
  }
})
</script>

<style scoped>
.post-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 50px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.user-info {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 600;
  font-size: 15px;
}

.post-time {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.post-actions {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #e5e5e5;
  margin-top: 16px;
}

.action-button {
  flex: 1;
  height: 40px;
  min-width: 80px;
  font-size: 14px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.like-button {
  color: #fff;
  background-color: #ff6b6b;
}

.like-button.liked {
  background-color: #ff4d4d;
}

.like-button:hover {
  background-color: #ff8b8b;
}

.comment-button {
  color: #666;
  background-color: #f5f5f5;
}

.comment-button:hover {
  background-color: #e6f2ff;
  color: #4a90e2;
}

.icon {
  font-size: 18px;
  margin-right: 8px;
}

.count {
  white-space: nowrap;
}
</style>